<template>

    <view :class="[$store.state.isMobile ? 'mobile-scene-container' : 'scene-container']">
      <view :class="[$store.state.isMobile ? 'mobile-text' : 'verticel-text']">上海外滩</view>
      <view :class="[$store.state.isMobile ? 'mobile-video-container' : 'video-container']">
        <video class="video-player" id="myVideo" src="https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4" @error="videoErrorCallback" :controls="false"
          :autoplay="true" :loop="false" @ended="videoEnded"></video>
      </view>
    </view>

</template>

<script>
export default {
  name: "video-card",
  props: {},
  data() {
    return {
      src: '',
      videoContext: null,
    }
  },
  computed: {},
  methods: {
    videoErrorCallback(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      });
    },

    videoEnded(e) {
      this.$emit('videoEnded');
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() { },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() { },
  // 组件周期函数--监听组件数据更新之后
  updated() { },
  // 组件周期函数--监听组件激活(显示)
  activated() {
    this.videoContext = uni.createVideoContext('myVideo')
  },
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() { },
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() { },
}

</script>

<style lang="scss">
.right-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 100rpx;
  margin-bottom: 100rpx;
  justify-content: space-between;
}

.scene-container {
  position: fixed;
  z-index: 9999;

  margin-top: 100px;
  justify-self: center;
  align-self: center;
  width: 900px;
  height: 400px;
  background-color: rgb(61, 61, 134);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.mobile-scene-container {
  position: fixed;
  z-index: 9999;
  margin-top: 200rpx;
  justify-self: center;
  align-self: center;
  width: 700rpx;
  height: 800rpx;
  background-color: rgb(61, 61, 134);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.verticel-text {
  height: 330px;
  font-size: 40px;
  word-wrap: break-word;
  width: 40px;
  line-height: 50px;
  color: white;
}

.mobile-text {
  font-size: 40px;
  color: white;
}

.video-container {
  width: 600px;
  height: 350px;
}

.mobile-video-container {
  width: 100%;
  height: 56.2%;
}

.video-player {
  width: 100%;
  height: 100%;
}
</style>